
import MyReact from './MyReact'
const root = document.getElementById('root')

/* 
测试内容：
1. 渲染真实dom
2. 时间属性
3. 函数组件、函数组件传递属性
4. 类组件、类组件传递属性
5. 对比新旧节点
6. 修改state
7.
*/
// 1、2
const virtualDOM = (
  <div className="container">
    <h1>你好 Tiny React</h1>
    <h2 data-test="test">(编码必杀技)</h2>
    <div>
      嵌套1 <div>嵌套 1.1</div>
    </div>
    <h3>(观察: 这个将会被改变)</h3>
    {/* aa */}
    {2 == 1 && <div>如果2和1相等渲染当前内容</div>}
    {2 == 2 && <div>2</div>}
    <span>这是一段内容</span>
    <button onClick={() => alert("你好")}>点击我</button>
    <h3>这个将会被删除</h3>
    2, 3
    <input type="text" value="13" />
  </div>
)
// MyReact.render(virtualDOM, root)

// 3
function Fn1 (props) {//组件必须大写，才能编译
  return (<div>{props.title}</div>)
}
// MyReact.render(<Fn1 title="hahah" />, root)

// 4
class Alert extends MyReact.Component {
  constructor(props) {
    super(props)// 给类传递参数
    this.props = {
      title: '默认标题'
    }
  }
  componentWillReceiveProps (nextProps) {
    console.log("componentWillReceiveProps")
  }
  componentWillUpdate () {
    console.log("componentWillUpdate")
  }
  componentDidUpdate () {
    console.log("componentDidUpdate")
  }
  render () {
    return (
      <div>Alert {this.props.title}</div>
    )
  }
}
// MyReact.render(<Alert title="hahah" />, root)

// 5
const modifyDOM = (
  <div className="container">
    <h1>你好 Tiny React</h1>
    <h2 data-test="test">(编码必杀技)</h2>
    <div>
      嵌套1 <div>嵌套 1.1</div>
    </div>
    {/* aa */}
    {2 == 1 && <div>如果2和1相等渲染当前内容</div>}
    {2 == 2 && <div>2</div>}
    <span>这是一段内容</span>
    <input type="text" value="13" />
  </div>
)
// MyReact.render(virtualDOM, root)
setTimeout(() => {
  // MyReact.render(modifyDOM, root)
}, 2000)

// 6
class Vdom6 extends MyReact.Component {
  constructor(props) {
    super(props)// 给类传递参数
    this.state = {
      title: 'default title'
    }
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick () {

    this.setState({
      title: 'change title' + Math.random(1, 2)
    })
  }
  render () {
    return (
      <div>class {this.state.title}
        <button onClick={this.handleClick}>change state</button>
      </div>
    )
  }
}
// MyReact.render(<Alert />, root)
setTimeout(() => {
  // MyReact.render(<Alert title="我更新了" />, root)
  // MyReact.render(<Vdom6 />, root)
}, 1000)

class DemoRef extends MyReact.Component {
  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick () {
    console.log(this.input.value)
    console.log(this.alert)
  }
  componentDidMount () {
    console.log("componentDidMount")
  }
  componentWillUnmount () {
    console.log("componentWillUnmount")
  }
  render () {
    return (
      <div>
        <input type="text" ref={input => (this.input = input)} />
        <button onClick={this.handleClick}>按钮</button>
        <Alert ref={alert => (this.alert = alert)} title="aaa" />
      </div>
    )
  }
}
// MyReact.render(<DemoRef />, root)

class KeyDemo extends MyReact.Component {
  constructor(props) {
    super(props)
    this.state = {
      persons: [
        {
          id: 1,
          name: "张三"
        },
        {
          id: 2,
          name: "李四"
        },
        {
          id: 3,
          name: "王五"
        },
        {
          id: 4,
          name: "赵六"
        }
      ]
    }
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick () {
    const newState = JSON.parse(JSON.stringify(this.state))
    // newState.persons.push(newState.persons.shift())
    // newState.persons.splice(1, 0, { id: 100, name: "李逵" })
    newState.persons.pop()
    this.setState(newState)
  }

  render () {
    let result = (
      <div>
        <div>
          {this.state.persons.map(person => (
            <div key={person.id}>{person.name}</div>
          ))}
        </div>
        <button onClick={this.handleClick}>按钮</button>
      </div>
    )
    return result
  }
}

MyReact.render(<KeyDemo />, root)
// setTimeout(() => {
//   MyReact.render(<KeyDemo />, root)
// }, 1000)